<template>
	<div class="welcome-box">
		<div class="welcome-box_nav">
            <el-button v-if="!createProjectObj.show" @click="back">返回</el-button>
            <el-button @click="importProject">导入</el-button>
		</div>
		<div style="width:100%;height:100%;padding:20px 0;overflow: auto;" v-if="!createProjectObj.show">
			<div style="padding:5px 23px 20px 23px;">开发,调试小程序项目</div>
			<div class="welcome-box_body">
				<div class="welcome-box_body_col" style="font-size:50px;" @click="createProject">+</div>
				<div class="welcome-box_body_col" v-for="(item,_index) in store.state.projectList" @click="loadProject(item)">
					<div class="welcome-box_body_col_desc">
						<div>项目名称</div>
						<div style="margin-top:5px;">{{ item }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="welcome-box_create" v-else>
			<el-form ref="form" :model="createProjectObj.form" label-width="80px">
				<el-form-item label="项目名称">
					<el-input v-model="createProjectObj.form.nameProject"></el-input>
				</el-form-item>
				<el-form-item label="AppId">
					<el-input v-model="createProjectObj.form.appId"></el-input>
				</el-form-item>
				<el-form-item label="目录">
					<el-input v-model="createProjectObj.form.pathPrject">
						<template #append>
							<el-icon @click="openFolder"><FolderOpened /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="cancel">取消</el-button>
					<el-button type="primary" @click="onCreateProjectSubmit">创建</el-button>
				</el-form-item>
			</el-form>
		</div>

	</div>

</template>
<script setup lang="ts">

import { useStore } from 'vuex';
import { ref, onMounted } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus'
import { FolderOpened } from '@element-plus/icons-vue'
import api from '../utils/sysapi';
import { saveProjectPathInfo } from '../utils';

// emit
const emit = defineEmits(['change']);

//data
const store = useStore();
const createProjectObj=ref({
	show:false,
	form:{
		nameProject:'miniprogram',
		appId:'',
		pathPrject:'',
	}
});

onMounted(async () => {

	createProjectObj.value.form.pathPrject = await api.homeDir()+'\\RaymondAppProjects';

})

const back = () => {
	emit('change',{type:'back',data:{}});
}
//导入项目
const importProject = () => {

	window.electron.ipcRenderer.send('open-import-project-window',{title:'选择项目'});

	window.electron.ipcRenderer.on('get-import-project-info', async (_event, item) => {

		let res = JSON.parse(item);

		if (!res.canceled) {
			//保存项目路径
			// saveProjectPathInfo('project.config.json', res.filePaths[0]);
			await editProjectInfo(res.filePaths[0])
			
			emit('change',{type:'importProjectSuccess',data:{projectPath:res.filePaths[0]}});

		}
	});

}

//加载项目
const loadProject = async (projectPath) => {

	// 同步检查文件夹是否存在
	const isProject=await api.existsSync(projectPath);
	if(!isProject) {
		ElMessageBox.confirm('该路径下不存在项目','提示',{confirmButtonText: '确定',showCancelButton:false,type: 'warning',});
		return;
	}
	await editProjectInfo(projectPath);

	emit('change',{type:'loadProject',data:{projectPath:projectPath}});

}

//创建项目
const createProject = () => {
	createProjectObj.value.show=true;
}

const cancel = () => {
	createProjectObj.value.show=false;
}
const onCreateProjectSubmit = () => {

	if(!createProjectObj.value.form.nameProject){
		ElMessage({
			message: '请输入项目名称',
			type: 'error',
		});
		return;
	}
	if(!createProjectObj.value.form.appId){
		ElMessage({
			message: '请输入appId',
			type: 'error',
		});
		return;
	}

	window.electron.ipcRenderer.send('create-project',JSON.stringify(createProjectObj.value.form));

	window.electron.ipcRenderer.on('create-project-success', async (_event, projectPath) => {
		if(projectPath){
			await editProjectInfo(projectPath);

			emit('change',{type:'createProjectSuccess',data:{projectPath:projectPath}});
		}else{
			ElMessage({
				message: '项目已存在',
				type: 'error',
			});
		}
	});
}

const editProjectInfo = async (projectPath) => {
	//保存新的项目路径信息
	await saveProjectPathInfo('project.config.json', projectPath);
}

const openFolder = async () => {
	window.electron.ipcRenderer.send('open-import-project-window',{title:'选择目录'});

	window.electron.ipcRenderer.on('get-import-project-info', (_event, item) => {
		let res = JSON.parse(item);
		if (!res.canceled) {
			createProjectObj.value.form.pathPrject=res.filePaths[0]
		}
	});
}




</script>
<style scoped>
.welcome-box{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.welcome-box_nav{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 60px;
	padding: 0 20px;
	background-color: #f5f5f5;
}

.welcome-box_body{
	flex: 1;
	display: flex;
	/* justify-content: space-around; */
	justify-content:flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin:0 10px;
}

.welcome-box_body_col{
	width: 165px;
	height: 250px;
	background-color: #f5f5f5;
    border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:12px;
	cursor: pointer;
	word-break: break-all; /* 在任何字符处换行 */
	position: relative;
	.welcome-box_body_col_desc{
		width:90%;
		margin:0 auto;
		position:absolute;
		bottom:10px;
		height:80px;
	}
}

.welcome-box_create{
	width:60%;
	height:100%;
	margin:0 auto;
	padding:20px;
	overflow: auto;
}
</style>